<!--
 * @Author: yuanming
 * @Date: 2024-06-30 08:01:12
 * @LastEditors: yuanming
 * @LastEditTime: 2024-09-20 13:49:11
 * @Description: fileDescription
-->
<template>
    <div class="parkMonitorRightWarp">
        <div class="block">
            <div class="blockItem">
                <div class="num">
                    <CountConponent :end-val="propsData.filingParkInfo.networkingTotal || 0" :duration="3" />
                </div>
                <img src="@/assets/images/icon17.png" alt="" />
                <div class="label color1">联网接入车场数</div>
            </div>
            <div class="blockItem">
                <div class="num">
                    <CountConponent :end-val="propsData.filingParkInfo.disconnectTotal || 0" :duration="3" />
                </div>
                <img src="@/assets/images/icon18.png" alt="" />
                <div class="label color2">断网车场数</div>
            </div>
        </div>
        <div class="title-screen">断网告警</div>
        <div class="alarmBlock">
            <template v-if="dataList.length > 0">
                <Vue3SeamlessScroll :list="dataList" class="seamlessBox">
                    <div class="alarmBlockItem" v-for="(item, index) in dataList" :key="index">
                        <div class="parkWarp">
                            <div class="parkNameBox">{{ item.parkName }}</div>
                            <div>负责人：{{ item.ownerName }}</div>
                        </div>
                        <div class="dateWarp">
                            <div>{{ formatTime(item.uploadTime) }}</div>
                            <div>电话：{{ item.ownerMobile }}</div>
                        </div>
                    </div>
                </Vue3SeamlessScroll>
            </template>
            <template v-else>
                <Empty />
            </template>
        </div>
    </div>
</template>
<script setup>
import moment from 'moment'
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'
import CountConponent from '@/components/countToComponent/index.vue'
import Empty from '@/components/empty/index.vue'

const dataList = ref([])

const formatTime = (time) => moment(time, 'YYYY-MM-DD HH:mm:ss').format('YYYY-MM-DD HH:mm:ss')

const propsData = defineProps({
    filingParkInfo: {
        type: Object,
        default: () => {},
    },
})

watch(() => propsData.filingParkInfo, (newVal) => {
    if (newVal && newVal.filingParkInfoDetail && newVal.filingParkInfoDetail.length > 0) {
        dataList.value = newVal.filingParkInfoDetail.length > 100 ? newVal.filingParkInfoDetail.slice(0, 100) : newVal.filingParkInfoDetail
    }
}, { immediate: true, deep: false })

</script>

<style lang="scss" scoped>
.parkMonitorRightWarp {
    width: 25vw;
    height: auto;
    min-height: 40vh;
    background-image: url("@/assets/images/box_right.png");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    right: 0vw;
    top: 14vh;
    padding: 1vw 1vw;
    box-sizing: border-box;
    z-index: 100;
    .block {
        width: 85%;
        height: auto;
        display: flex;
        justify-content: space-around;
        align-items: center;
        .blockItem {
            width: 40%;
            height: auto;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            .num {
                font-size: 1.8vw;
                font-weight: bold;
                font-family: "YouSheBiaoTiHei";
            }
            img {
                width: 8vw;
                height: 8vw;
            }
            .label {
                position: relative;
                top: -1vh;
                left: 0.2vw;
                font-weight: 500;
            }
            .color1 {
                color: #d5ffd3;
            }
            .color2 {
                color: #ff9090;
            }
        }
    }
    .alarmBlock {
        width: 88%;
        height: 40vh;
        overflow: hidden;
        margin-top: 1vh;
        .seamlessBox {
            width: 100%;
            height: 40vh;
            overflow: hidden;
        }
        .alarmBlockItem {
            width: 100%;
            height: auto;
            background-size: 100% 100%;
            background-position: center;
            background-repeat: no-repeat;
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            align-items: center;
            padding: 3vh 0 3vh 4vw;
            box-sizing: border-box;
            .dateWarp {
                font-size: 0.75vw;
            }
            .dateWarp,
            .parkWarp {
                line-height: 3vh;
                font-size: 0.65vw;
                .parkNameBox {
                    width: 7vw;
                    white-space: nowrap;
                    /*2. 超出的部分隐藏*/
                    overflow: hidden;
                    /*3. 文字用省略号替代超出的部分*/
                    text-overflow: ellipsis;
                }
            }
        }
        .alarmBlockItem:nth-child(odd) {
            background-image: url("@/assets/images/icon19.png");
        }
        .alarmBlockItem:nth-child(even) {
            background-image: url("@/assets/images/icon20.png");
        }
    }
}
</style>
